<script lang="ts" setup>
import { ref, onMounted, h } from "vue";

const keyWord = ref("");
const isAdd = ref(true);
const list = ref(["教师", "程序员", "哈哈"]);
const myInput = ref();
function deleteTag(index: number) {
  // 删除数组
  list.value.splice(index, 1);
}
function addTag() {
  isAdd.value = false;
  setTimeout(() => {
    myInput.value.focus();
  }, 0);
}

function add() {
  if (keyWord.value) {
    list.value.push(keyWord.value);
  }
  isAdd.value = true;
  keyWord.value = "";
}
</script>

<template>
  <div class="container">
    <div class="tag" v-for="(item, index) in list" :key="index">
      <span style="font-size: 14px">{{ item }}</span>
      <div class="close" @click="deleteTag(index)">×</div>
    </div>
    <div v-show="isAdd" class="addTag" @click="addTag">+</div>
    <input
      @blur="add"
      style="
        width: 45px;
        outline: #409eff;
        border: 1px solid #409eff;
        border-radius: 3px;
      "
      v-show="!isAdd"
      v-model="keyWord"
      type="text"
      ref="myInput"
    />
  </div>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  gap: 6px;
}

.tag {
  color: #409eff;
  width: auto;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #409eff;
  border-radius: 3px;
  line-height: normal;
}
.addTag {
  font-size: 20px;
  padding: 4px 16px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  border: 1px dashed #c0c0c4;
  &:hover {
    cursor: pointer;
    color: #409eff;
    border-color: #409eff;
  }
}
.close {
  &:hover {
    background: #bababb;
    opacity: 0.8;
    cursor: pointer;
  }
}
</style>
